From 0ad69c9c58a460be126852b057985e84ee98adff Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Wed, 10 Jan 2024 09:44:01 -0800
Subject: feat(user): show number of badges

---
 src/routes/user/[user]/+page.svelte | 29 ++++++++++++++++++++++++++---
 1 file changed, 26 insertions(+), 3 deletions(-)

(limited to 'src/routes/user/[user]/+page.svelte')

diff --git a/src/routes/user/[user]/+page.svelte b/src/routes/user/[user]/+page.svelte
index 51ccafcb..c6423754 100644
--- a/src/routes/user/[user]/+page.svelte
+++ b/src/routes/user/[user]/+page.svelte
@@ -38,7 +38,7 @@
 				target="_blank"
 				title={String(userData.id)}
 			>
-				<img src={userData.avatar.large} alt="" width="100vw" />
+				<img src={userData.avatar.large} alt="" width="100vw" id="avatar" />
 			</a>
 
 			<div>
@@ -51,9 +51,27 @@
 					<span class="click-item">•</span> <a href={`/user/${userData.name}/badges`}>Badge Wall</a>
 				</p>
 
-				This user has watched {(userData.statistics.anime.minutesWatched / 60 / 24).toFixed(1)} days
-				of anime and read
+				{data.username} has watched {(userData.statistics.anime.minutesWatched / 60 / 24).toFixed(
+					1
+				)} days of anime and read
 				{estimatedDayReading(userData.statistics.manga.chaptersRead).toFixed(1)} days of manga.
+
+				<p />
+
+				{data.username} has collected {#await fetch(`/api/badges?id=${userData.id}`)}
+					...
+				{:then badges}
+					{#await badges.json()}
+						...
+					{:then badges}
+						{badges.length}
+					{:catch}
+						?
+					{/await}
+				{:catch}
+					?
+				{/await}
+				badges using Badge Wall.
 			</div>
 		</div>
 	{/if}
@@ -66,6 +84,11 @@
 		column-gap: 1.5em;
 	}
 
+	#avatar {
+		margin-top: 0.5em;
+		padding-bottom: 0.5em;
+	}
+
 	.click-item {
 		margin: 0 0.625rem;
 	}
-- 
cgit v1.2.3

